<template>
    <div>
        <!-- 使用 Element Plus 的标签页组件实现登录与注册切换功能 -->
        <el-tabs v-model="activeTab">
            <!-- 登录标签页 -->
            <el-tab-pane label="登录" name="login">
                <h2 class="login-title">家长/教师登录</h2>
                <!-- 登录表单，绑定登录数据模型和验证规则 -->
                <el-form 
                    :model="loginForm" 
                    label-width="100px"
                    :rules="loginRules"
                    ref="loginFormRef"
                >
                    <!-- 登录表单内容 -->
                    <el-form-item label="账号" prop="number">
                        <el-input 
                            v-model="loginForm.number" 
                            placeholder="请输入账号"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input 
                            v-model="loginForm.password" 
                            type="password" 
                            placeholder="请输入密码"
                            show-password
                        />
                    </el-form-item>
                    <el-form-item>
                        <!-- 登录按钮，点击触发登录逻辑 -->
                        <el-button 
                            type="primary" 
                            @click="handleLogin"
                            :loading="loginStore.loginLoading"
                        >
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <!-- 注册标签页 -->
            <el-tab-pane label="注册" name="register">
                <h2 class="login-title">新用户注册</h2>
                <!-- 注册表单，绑定注册数据模型和验证规则 -->
                <el-form 
                    :model="registerForm" 
                    label-width="100px"
                    :rules="registerRules"
                    ref="registerFormRef"
                >
                    <!-- 注册表单内容 -->
                    <el-form-item label="用户名" prop="number">
                        <el-input 
                            v-model="registerForm.number" 
                            placeholder="请输入用户名"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input 
                            v-model="registerForm.password" 
                            type="password" 
                            placeholder="请输入密码"
                            show-password
                        />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input 
                        v-model="registerForm.confirmPassword" 
                            type="password" 
                            placeholder="请输入密码"
                            show-password
                        />
                    </el-form-item>
                    <el-form-item label="真实姓名" prop="realName">
                        <el-input 
                            v-model="registerForm.realName" 
                            placeholder="请输入用户名"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idCard">
                        <el-input 
                            v-model="registerForm.idCard" 
                            placeholder="请输入用户名"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                        <el-input 
                            v-model="registerForm.mobile" 
                            placeholder="请输入用户名"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input 
                            v-model="registerForm.email" 
                            placeholder="请输入用户名"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item>
                        <!-- 注册按钮，点击触发注册逻辑 -->
                        <el-button 
                            type="primary" 
                            @click="handleRegister"
                            :loading="loading"
                        >
                            注册
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useLoginStore } from '../../stores/index.js';
import { userRegister } from '../../api/login/login.js'

const router = useRouter();
const activeTab = ref('login');

const loginFormRef = ref();
const registerFormRef = ref();

const loginStore = useLoginStore();


const loading = ref(false);

/**
 * 登录表单数据模型
 * @property {string} number - 用户名
 * @property {string} password - 密码
 * @property {string} loginType - 登录类型，固定为 'user'
 */
const loginForm = reactive({
    number: '',
    password: '',
    loginType: 'user'  // 指定登录类型
});

const registerForm = reactive({
    number: '',
    password: '',
    confirmPassword: '',
    realName: '',
    idCard: '',
    mobile: '',
    email: '',
    loginType: 'user'
});

/**
 * 注册表单数据模型
 * @property {string} number - 用户名
 * @property {string} password - 密码
 * @property {string} confirmPassword - 确认密码
 * @property {string} role - 用户角色，'parent' 或 'teacher'
 */


// 表单引用



/**
 * 登录表单验证规则
 * @property {Array} number - 用户名验证规则
 * @property {Array} password - 密码验证规则
 */
const loginRules = {
    number: [
        { required: true, message: '请输入账号', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
};

/**
 * 注册表单验证规则
 * @property {Array} number - 用户名验证规则
 * @property {Array} role - 角色验证规则
 * @property {Array} password - 密码验证规则
 * @property {Array} confirmPassword - 确认密码验证规则，包含自定义验证器确保两次密码一致
 */
const registerRules = {
    number: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
        
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    
    ],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== registerForm.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ]
};

/**
 * 处理登录逻辑
 * 验证表单后调用登录接口，并根据返回的角色信息跳转至对应页面
 * @returns {Promise<void>}
 */
const handleLogin = async () => {
    try {
        await loginFormRef.value.validate();
        
        // 调用Pinia的登录方法
        const res = await loginStore.postLogin(loginForm);
        
        // 登录成功后根据角色跳转
        if (res.code === 200) {
            router.push('/user/parent/home');
        }} catch (error) {
        console.log('登录失败:', error);
    }
};

/**
 * 处理注册逻辑
 * 验证表单后模拟注册请求，成功后提示并切换到登录页面
 * @returns {Promise<void>}
 */
const handleRegister = async () => {
    console.log("注册逻辑");
   try {
        await registerFormRef.value.validate();
        loading.value = true;
        const res =await userRegister(registerForm)
        if(res.code === 200) {
            activeTab.value = 'login';
        }
        console.log(res);
    } catch (error) {
        console.log('表单验证失败:', error);
        
    } finally {
        loading.value = false;
    }
};
</script>

<style scoped>
@import '../../styles/login_styles.css';
</style>
